<template>
	<view class="bg pt-40 plr-30 white">
		<view class="">
			填写反馈信息
		</view>
		<u-field v-model="remark" :border-bottom="false" label-width="0" placeholder="请填写反馈信息" type="textarea" class="mtb-20">
		</u-field>
		<!-- 图片 -->
		<view class="">
			请上传反馈图片
		</view>
		<view class="upload-img-box flex flex-start">
			<view class="flex mt-60 flex-between mr-10">
				<view v-for="(item,index) in imgList" :key='index' style="position:relative">
					<image class="pre-img mr-20" mode='aspectFill' :src="item"  alt=""></image>
					<image class='delete' src='https://static-c.ehsy.com/m/images/delete.png' @click='deleteImg(index)'>
					</image>
				</view>
			</view>
			<view class="mt-60" id='fileUploadBtn' @click="chooseImgs()" v-show="imgList.length < 3">
				<image src="../../static/upImg.png" class='upload_img'></image>
			</view>
		</view>
		<!-- <u-button type="primary" class="mt-100" hover-class="none" @click="submitFeed">提交</u-button> -->
		<view class="ptb-40 mlr-30">
			<button class="default-button" @click="submitFeed">提交</button>
		</view>
	</view>
</template>

<script>
	import tab from "../../components/tab.vue"
	import {
		baseUrl
	} from '../../common/http.js'
	export default {
		components: {
			tab
		},
		data() {
			return {
				remark: '',
				images: "",
				imgList: []
			}
		},
		methods: {
			chooseImgs() {
				let _this = this;
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						let imgarr = res.tempFilePaths
						let arr = []
						imgarr.forEach(item => {
							uni.uploadFile({
								url: baseUrl + '/api/upload/fileUpload',
								filePath: item,
								name: 'image',
								success: (res) => {
									uni.hideLoading()
									let path = JSON.parse(res.data).data
										.path;
									_this.imgList.push(path);
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							});
						})
					}
				})
			},
			deleteImg(index) {
				this.imgList.splice(index, 1);
			},
			submitFeed() {
				if (this.remark == '') {
					uni.showToast({
						title: "请填写反馈信息!",
						icon: 'none'
					})
					return;
				}
				if(this.imgList.length>0){
					this.images=this.imgList.join(',');
				}
				this.$http('api/user/feedBack', {
					remark: this.remark,
					images: this.images
				}, "POST").then(res => {
					uni.showToast({
						title: "提交成功!"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: './contact'
						})
					}, 500)
				})
			},

		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>
	.pre-img {
		width: 200rpx;
		height: 200rpx;
		display: block;
		position: relative;
	}

	.delete {
		z-index: 5;
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top:-20rpx;
		right: 0rpx;
	}

	.upload_img {
		width: 200rpx;
		height: 200rpx;
	}
	.u-field{
		background: #fff;
		border-radius: 20rpx;
	}

	.default-button {
		font-size: 32rpx;
		color: #EFE0C0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44rpx;
	}
</style>
